import toNative from '@/utils/toNative'
import { RangePicker, type TimeRangePickerProps } from 'ant-design-vue'
import type { VueNode } from 'ant-design-vue/es/_util/type'
import type { RangePickerProps } from 'ant-design-vue/es/date-picker'
import { nextTick, ref } from 'vue'
import { Component, Prop } from 'vue-facing-decorator'
import Render from '@/render/Render'

export type PrefixDatePickerProps = RangePickerProps & {
  prefix?: VueNode;
  class?: string
}

@Component
export class PrefixRangePicker extends Render {
    @Prop() prefix?: string | VueNode

    dateDom = ref(<div></div>)

    onMounted() {
        const dom = document.createElement('span')
        dom.className = 'text-black-300 mr-8 flex items-center flex-shrink-0'
        if (typeof this.prefix === 'string') {
            dom.textContent = this.prefix
        } else {
            console.error('Select prefix must be string')
        }

        nextTick(() => {
            if(this.dateDom.value) {
                (this.dateDom.value as any).ctx.vnode.el.querySelector('.ant-picker-input').prepend(dom)
            }
        })
    }

    render() {
        this.dateDom.value = <RangePicker class="!w-full" {...this.$props}/>
        return this.dateDom.value
    }
}

export default toNative<PrefixDatePickerProps>(PrefixRangePicker)